<template>
  <div class="phoneinput">
    
    <label v-if="title!==''">
      <span v-show="req" style="color:red;">*</span>
      {{title}}:
    </label>
    <el-input v-model="val" :placeholder="placeholder" v-on:blur="checkphoneExit" clearable>
      <i v-if="icon!==''" slot="suffix" v-bind:class="[icon, 'el-input__icon']"></i>
    </el-input>
    <!-- <span class="warningword" v-show="showWord === 1">
      <i class="iconfont icon-buoumaotubiao20"></i>
      <span class="wordc">请输入手机号码</span>
    </span> -->
    <span class="warningword" v-show="showWord === 2">
      <i class="iconfont icon-buoumaotubiao20"></i>
      <span class="wordc">请输入有效的手机号码</span>
    </span>
    <span class="warningword" v-show="showWord === 4">
      <i class="iconfont icon-buoumaotubiao20"></i>
      <span class="wordc">号码已注册</span>
    </span>
  </div>
</template>
<style scoped>
.phoneinput {
  margin: 5px 5px;
}
label {
  display: inline-block;
  min-width: 70px;
}
.phoneinput i {
  font-size: 18px;
}
.phoneinput >>> .el-input{
    width: auto;
}
.phoneinput >>> .el-input__inner {
  background: #ffffff;
  min-width: 150px;
  padding-right: 15px;
  height: 32px;
}
.phoneinput >>> .el-input__icon {
  height: 32px;
  line-height: 32px;
}
.warningword {
  display: inline-block;
  /* align-items: center; */
  color: red;
  padding-left: 10px;
}
.warningword i {
  font-size: 18px;
}
.wordc{
    display: inline-block;
    height: 35px;
    line-height: 35px;
    border: 1px solid #e4dddd;
    box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1);
    border-radius: 5px;
    padding-left: 5px;
    padding-right: 5px;
}
</style>
<script>
import { mapState } from "vuex";
export default {
  name: "phoneinput",
  props: {
    title: {
      default: ""
    },
    icon: {
      default: ""
    },
    value: {
      default: ""
    },
    placeholder: {
      default: "请输入手机号码"
    },
    req: {
      default: true //手机号码是否必填
    },
    checkExit:{
      default: true //是否需要检查手机号码有没有注册过
    },
    clearable:{
       default: true 
    }
  },
  meta: {
    descr: "验证手机号码输入框"
  },
  data() {
    return {
      val: "",
      showWord: 3, //1.手机号码为空  2.手机号码不正确 4.手机号码已注册  3.是正确且没有注册过
      phoneExitdata: {
        roleId: "",
        tele: ""
      }
    };
  },
  computed: mapState({
    userInfo: state => state.loginStoreModel.userInfo
  }),
  methods: {
    checkphoneExit() {
      let that = this;
      if (that.checkExit){
      that.phoneExitdata.tele = that.val;
      that.phoneExitdata.roleId = this.userInfo.role[0].roleId;
      if (that.showWord === 3) {
        that.$axios
          .post(
            "/Edison/auth/register/checkUserExist",
            that.phoneExitdata,
            false
          )
          .then(res => {
            if (res.data.code === 0) {
              if (res.data.data == true) {
                that.showWord = 4;
              } else {
                that.showWord = 3;
              }
            } else {
              that.$message.error(res.data.msg);
            }
          });
      }  
      }
      
    }
  },
  created() {
    let that = this;
    // console.log(this.userInfo);
    this.val = this.value;
  },
  watch: {
    val: {
      handler(newName, oldName) {
        let that = this;
        this.$emit("input", newName);
        if (that.req) {
          if (this.val != "") {
            if (!(/^1[34578]\d{9}$/.test(this.val))) {
              that.showWord = 2;
            } else {
              that.showWord = 3;
            }
          } else {
            that.showWord = 1;
          }
        } else {
          if (this.val != "") {
            if (!(/^1[34578]\d{9}$/.test(this.val))) {
              that.showWord = 2;
            } else {
              that.showWord = 3;
            }
          } else {
            that.showWord = 3;
          }
        }
      },
      deep: true
    },
    value() {
      this.val = this.value;
    }
  }
};
</script>
